<script setup lang="ts">
import PorFlowDesigner from '@/components/_builtin/por-flow/por-flow-designer.vue';
</script>

<template>
  <div class="h-screen flex">
    <PorFlowDesigner></PorFlowDesigner>
  </div>
</template>

<style>
.vue-flow__node {
  padding: 12px;
  border-radius: 4px;
  border: 2px solid #333;
  background: white;
  cursor: grab;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.vue-flow__node.dragging {
  cursor: grabbing;
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.vue-flow__node-start {
  border-color: #4caf50;
}

.vue-flow__node-process {
  border-color: #2196f3;
}

.vue-flow__node-decision {
  border-color: #ff9800;
}

.vue-flow__node-end {
  border-color: #f44336;
}

/* 确保画布容器正确填充父元素 */
/* .vue-flow {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #f8f8f8;
} */

/* 确保拖拽元素有明确的尺寸 */
.draggable-node {
  width: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 拖拽元素的样式 */
.draggable-item {
  user-select: none;
  cursor: grab;
}

/* 连线样式 */
.vue-flow__edge-path {
  stroke: #333;
  stroke-width: 2;
}

/* 新增或修改的样式 */
.vue-flow-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #f8f8f8;
}

/* 控制按钮组样式（右上角） */
.flow-controls {
  top: 1rem !important;
  right: 1rem !important;
  transform: none !important;
}

/* 缩略图样式（右下角） */
.flow-minimap {
  bottom: 10rem !important; /* 改为底部定位 */
  right: 1rem !important; /* 右侧定位 */
  top: auto !important; /* 取消顶部定位 */
  transform: none !important;
  left: auto !important; /* 取消左侧定位 */
}

/* 确保MiniMap不会太大 */
.vue-flow__minimap {
  width: 200px;
  height: 150px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
}

/* 调整整体布局高度 */
.n-layout-content {
  height: calc(100vh - 4rem); /* 减去头部高度 */
  position: relative;
}
</style>
